<template>
  <div class="app-container">



        <div class="filter-container">
      <el-input
      :disabled="userState"
        v-model="queryParams.openid"
        placeholder="用户编号/卡号"
        style="width: 250px;"
        class="filter-item"
        @keyup.enter.native="queryBtn"
      />

 

<br/>
      <el-date-picker
      :disabled="userState"
        v-model="queryParams.startTime"
        value-format="yyyy-MM-dd HH:mm:ss"
        style="width: 250px;margin-top: 10px;"
        type="datetime"
        placeholder="请选择开始时间"
      ></el-date-picker>

       <el-date-picker
       :disabled="userState"
        v-model="queryParams.endTime"
        value-format="yyyy-MM-dd HH:mm:ss"
        style="width: 250px;margin-left:5px;"
        type="datetime"
        placeholder="请选择结束时间"
      ></el-date-picker>

      <el-button
      :disabled="userState"
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        style="margin-left: 5px"
        @click="queryBtn"
      >
        查询
      </el-button>

 <el-button  :disabled="userState" v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="checkDate">
        导出
      </el-button>


  </div>


    <el-table
      :header-cell-style="{ background: '#ffffff', color: '#000000' }"
      :key="tableKey"
      :row-class-name="tableRowClassName"
      v-loading="listLoading"
      :data="list"
      :row-key="'cardNo'"
      :stripe=true
      ref="ebCardTable"
      @selection-change="handleTableChange"
      border
      fit
      highlight-current-row
      style="
        width: 100%;
        font-size: 15px;
        box-shadow: 1px 1px 8px #cdcdcd;
        border: 0px;
      "
      :default-sort="{ prop: 'time', order: 'descending' }"
    >
 
      <el-table-column label="用户编号/卡号" min-width="200px">
        <template slot-scope="scope">
          <span>{{ scope.row.userId }}</span>
        </template>
      </el-table-column>


       <el-table-column label="订单号" min-width="220px">
        <template slot-scope="scope">
          <span>{{ scope.row.orderId }}</span>
        </template>
      </el-table-column>

        <el-table-column label="设备名称" min-width="200px">
        <template slot-scope="scope">
          <span>{{ scope.row.chargeName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="设备编号" min-width="100px">
        <template slot-scope="scope">
          <span>{{ scope.row.deviceNo }}</span>
        </template>
      </el-table-column>


             <el-table-column label="插座号" min-width="100px">
        <template slot-scope="scope">
          <span>{{ scope.row.plugNo }}</span>
        </template>
      </el-table-column>

      <el-table-column label="开始时间" min-width="130px">
        <template slot-scope="scope">
          <span>{{ scope.row.startTime }}</span>
        </template>
      </el-table-column>

     <el-table-column label="结束时间" min-width="130px">
        <template slot-scope="scope">
          <span>{{ scope.row.endTime }}</span>
        </template>
      </el-table-column>


      <el-table-column label="充电时长" min-width="100px">
        <template slot-scope="scope">
          <span>{{ scope.row.chargeTimeLength }}</span>
        </template>
      </el-table-column>

      <el-table-column label="消费金额" min-width="100px">
        <template slot-scope="scope">
          <span>{{ scope.row.consumeNet }}</span>
        </template>
      </el-table-column>

<el-table-column label="支付方式" width="120" fixed="right" align="center">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.payWays == '0'" size="success" type="info" effect="dark">微信支付</el-tag>
              <el-tag v-else size="medium" type="warning" effect="dark">刷卡支付</el-tag>
            </template>

          </el-table-column>
 

    </el-table>

    <el-row>
      <el-col :span="24" class="page-tool">
        <el-pagination
          layout="total,sizes,prev, pager,next,jumper"
          style="margin-top: 10px"
          :page-size="pageSize"
          :total="total"
          :page-sizes="[20, 40, 60, 80]"
          @size-change="handlePageChange"
          @current-change="handleNoChange"
        ></el-pagination>
      </el-col>
    </el-row>


  </div>
</template>

<style>

.page-tool {
  background: rgb(237, 231, 231);
}

.page-tool div {
  text-align: right;
}

.lock-btn {
  margin-bottom: 5px;
  margin-top: -10px;
}
.operateBtn {
  font-size: 18px;
  width: 32px;
  height: 32px;
  padding: 0;
}

.el-table .warning-row {
  background: #fff5ee;
}
.el-table__body tr:hover > td {
  background-color: #fdc091;
}
.el-table__body tr.current-row > td {
  background-color: #fdc091;
}
</style>


<script>

import { loadRecordApi} from "@/api/bike";
import axios from 'axios';
import { getToken } from '@/utils/auth';
import waves from "@/directive/waves"; // waves directive
import { getNickName, getTestUserName } from "../../utils/auth";
 
export default {

name: "ebCard",
  directives: { waves },
  data: function () {
    return {
      clientHeight:
        Math.max(
          document.documentElement.scrollHeight,
          document.body.scrollHeight
        ) -
        132 -
        5 +
        10 -
        28,
      loading: false,

      list: [],
      pageNo: 1,
      pageSize: 40,
      total: 0,
      listLoading: true,
      queryParams:{
        startTime:'',
        endTime:'',
        openid:''
      },

      pageNo: 1,
      pageSize: 40,
      total: 0,
      labelWidth2:"100px",
      multipleSelection: [],
      rechargerDialog: false,
      labelWidth: "100px",
      selected: "",
      tableKey: 0,
      addDialog: false,
      labelWidth: "120px",
      form: {},

      roleIndex: true,
      total: 0,
      loading: false,
      total: 0,     
      labelWidth: "150px",
      currentPage: 1,
      pageSizes: [20, 40, 60],
      downloadLoading: false,
      listLoading: true,
      listQuery: {
        pageNo: 1,
        pageSize: 41,
        name: undefined,
        phone: undefined,
        number: undefined,
        sort: "+id",
      },


     

    };
  },



  mounted: function () {
     this.$nextTick(function () {
      let _this = this;
      _this.loadRecord(_this.pageNo, _this.pageSize);
    });
  },


  computed: {
    userState () {
      return getNickName() === getTestUserName();
    }
  },
  

  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        return "warning-row";
      }
      return "";
    },

 
    handleFilter() {
      this.listQuery.pageNo = 1;
   //   this.getList();
    },
    handleModifyStatus(row, status) {
      this.$message({
        message: "操作Success",
        type: "success",
      });
      row.status = status;
    },

    //列表页码的触发事件
    handlePageChange(pageSize) {
      this.pageSize = pageSize;
      this.loadRecord(this.pageNo, this.pageSize);
    },
    handleNoChange(pageNo) {
      this.pageNo = pageNo;
      this.loadRecord(this.pageNo, this.pageSize);
    },
    handleTableChange(val) {
      this.multipleSelection = val;
    },
    loadRecord(pageNo, pageSize) {
      let _this = this;
      _this.loading = true;
      loadRecordApi({pageNo: _this.pageNo,
        pageSize: _this.pageSize,
        openid:_this.queryParams.openid,
        startTime:_this.queryParams.startTime,
        endTime:_this.queryParams.endTime,
        roleCode:this.$store.state.mainpart.key
        }).then(resp => {
        if (resp.errmsg === "ok") {
            _this.total = resp.data.totalNum;
            _this.list = resp.data.dataList;
  
          }
          
         setTimeout(() => {
          _this.listLoading = false;
        }, 1 * 1000);
      })
      .catch(function (e) {
          console.log(e);
      });
    },
    

    queryBtn () {
      let _this = this
      _this.loading = true
     var stime = new Date(this.queryParams.startTime).getTime();
	   var etime = new Date(this.queryParams.endTime).getTime();
	   var day = (etime - stime)/(24*60*60*1000);
    if (day <= 0) {
		alert("结束时间不能小于开始时间");
   	}else{
    _this.loadRecord (_this.pageNo, _this.pageSize, _this.queryForm)
    }

     
    },



    checkDate(){
// var stime = new Date(this.queryParams.startTime.replace(/-/g,'/'));
// var etime = new Date(this.queryParams.endTime.replace(/-/g,'/'));
	var stime = new Date(this.queryParams.startTime).getTime();
	var etime = new Date(this.queryParams.endTime).getTime();
	var day = (etime - stime)/(24*60*60*1000);
  if (day <= 0) {
		alert("结束时间不能小于开始时间");
	}else{
    this.handleDownload();
  }


    },



      handleDownload() {
      axios({
        method: "GET",
        url: "/lcebchargerlog/exportLcEbChargerLogByCond",
        params: this.queryParams,
        headers: { pacargle: getToken() },
        responseType: "blob", //返回是个文件
      }).then((response) => {
        this.download(response); //then直接下载，方法在下边
      });
    },
    download(res) {
      let blob = new Blob([res.data], { type: "text/xls,charset=UTF-8" }); //type是文件类，详情可以参阅blob文件类型
      // 创建新的URL并指向File对象或者Blob对象的地址
      const blobURL = window.URL.createObjectURL(blob);
      // 创建a标签，用于跳转至下载链接
      const tempLink = document.createElement("a");
      tempLink.style.display = "none";
      tempLink.href = blobURL;
      tempLink.setAttribute(
        "download",
        decodeURI(
          res.headers["content-disposition"].split(";")[1].split("=")[1]
        )
      );
      // 兼容：某些浏览器不支持HTML5的download属性
      if (typeof tempLink.download === "undefined") {
        tempLink.setAttribute("target", "_blank");
      }
      // 挂载a标签
      document.body.appendChild(tempLink);
      tempLink.click();
      document.body.removeChild(tempLink);
      // 释放blob URL地址
      window.URL.revokeObjectURL(blobURL);
    }

 
  }
}

</script>